<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">

    <title>档案管理</title>
    <link href="/css/style.css" type="text/css" rel="stylesheet">
    <link href="/css/monitor.css?v=4" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="/css/layui.css" media="all">
    <!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie.css"/>
    <![endif]-->
    <!--[if lte IE 9]>
    <script>alert("您正在使用的浏览器版本过低，为了您的最佳体验，请先升级浏览器。");
    window.location.href = "http://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href);</script>
    <![endif]-->

    <style>
        body, html {
            height: 100%;
            min-width: 1600px;
            overflow: hidden;
        }

        ::-webkit-scrollbar {
            height: 10px;
            overflow: visible;
            width: 6px;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #033b70;
            background-clip: padding-box;
            border: 1px solid #03437a;
            border-width: 1px;
            min-height: 28px;
            max-height: 100px;
            padding: 10px 0 0;
            box-shadow: inset 0 0 2px hsla(0, 0%, 100%, .25);
        }
        .header .layui-nav {
            position: absolute;
            right: 0;
            top: 0;
            padding: 0;
            background: none;
        }

        .botm .box .btm_cont .cont_title2{position:absolute;width:250px;height:50px;left:50%;margin-left:-125px;top:-1px;/* background:#050e32 url(/images/perng_cen_icon.png); */text-align:center;color:#a7dbff;font-size:20px;font-weight:bold;line-height:22px;}



    </style>
    <link type="text/css" rel="stylesheet" charset="UTF-8" href="https://translate.googleapis.com/translate_static/css/translateelement.css">
    <script type="text/javascript" charset="UTF-8" src="https://translate.googleapis.com/translate_static/js/element/main_zh-CN.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://translate.googleapis.com/element/TE_20200506_00/e/js/element/element_main.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->


    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/style.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/theme/_customTheme.js?v=3"></script>
    <!--
    <script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
    -->
</head>
<style>

    .leftLi{cursor: pointer;height: 40px;font-size: 18px}
</style>
<body style="background:#050e32;">

<div class="header">
    <em><img src="/images/time_icon.png"><a style="color:#2c9eff;" class="showDate"></a></em>
    <div class="wrap"><p>档案管理可视化工具</p></div>
</div>
<!--部门id-->
<input type="hidden" th:value="${depId}" id="depId">
<div class="botm">
    <div class="box botm_lf" style="width: 19%">
        <div class="btm_space"></div>
        <div class="btm_cont lit" style="height: 96%">
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div>
                <ul th:each="dep,depStat : ${depTree}" style="color: #ffffff; margin-top: 22px;margin-left: 10px;">
                    <li class="leftLi" th:text="${dep.depName}"  onclick="reload('')"  th:id="rootDep" style="">depName</li>
                    <ul th:each="dep1,dep1Stat : ${dep.child}" style="margin-left: 10px">
                        <li class="leftLi" th:text="${dep1.depName}"   th:value="${dep1.depSerial}"  th:id="${dep1.depSerial}"th:onclick="reload([[${dep1.depSerial}]])"> depName</li>

                        <ul th:each="dep2,dep2Stat : ${dep1.child}" style="margin-left: 20px">
                            <li class="leftLi" th:text="${dep2.depName}"  th:value="${dep2.depSerial}"  th:id="${dep2.depSerial}" th:onclick="reload([[${dep2.depSerial}]])"> depName</li>

                            <ul th:each="dep3,dep3Stat : ${dep2.child}" style="margin-left: 30px">
                                <li  class="leftLi" th:text="${dep3.depName}"  th:value="${dep3.depSerial}" th:id="${dep3.depSerial}" th:onclick="reload([[${dep3.depSerial}]])"> depName</li>
                            </ul>
                        </ul>
                    </ul>
                </ul>
            </div>
        </div>
    </div>

    <div class="box botm_lf" style="width: 45%">
        <div class="btm_space" style="height: 2%"></div>
        <div class="btm_cont lit" style="height: 62%">
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="art_box" style="margin-top: 10px" id="totalPeople">
                <div id="totalPeople_left" style="/*width: 220px;*/height: 430px;float: left">
                    <div style="margin-left: 30px;margin-top: 99px; text-align: center">
                        <img src="/images/alluser.png">
                        <p style="color: #ffffff; font-size: 27px;margin-top: 15px;">总人数</p>
                        <p style="color: #ffffff; font-size: 70px" id="allCount"></p>
                    </div>
                </div>

                <div id="totalPeople_right" style="width: 290px;height: 430px; float: right">

                </div>

                <div id="totalPeople_center" style="width: 290px;height: 430px; margin-left: 35px;float: right;">

                </div>


            </div>
        </div>
        <!--学历统计-->
        <div class="btm_space" style="height: 2%"></div>
        <div class="btm_cont big" style="height: 32%">

            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="cont_title2"></div>
            <div class="art_box" style="margin-top: 10px" id="education">

            </div>
        </div>
    </div>

    <div class="box botm_rt" style="width: 36%">
        <!--年龄段统计-->
        <div class="btm_space" style="height: 2%"></div>
        <div class="btm_cont lit"  style="height: 31%">
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="art_box" style="margin-top: 10px" id="ageStatistic">

            </div>
        </div>
        <!--工龄统计-->
        <div class="btm_space" style="height: 2%"></div>
        <div class="btm_cont big" style="height: 30%">
            <!--<div class="cont_more"><a href="">更多&gt;&gt;</a>
            </div>-->
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="art_box" style="margin-top: 10px" id="seniorityStatistic">

            </div>
        </div>

        <!--工种统计-->
        <div class="btm_space" style="height: 2%"></div>
        <div class="btm_cont big" style="height: 30%;">
            <!--<div class="cont_more"><a href="">更多&gt;&gt;</a>
            </div>-->
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="art_box" style="margin-top: 10px" id="jobStatistic">
            </div>
        </div>
    </div>

</div>

</body>


<script type="text/javascript" src="/js/layer.js?v=2"></script>

<script type="text/javascript">

    function reload(depId) {
     window.location.href = "/monitor/file?depId=" + depId;
    }

    //取得系统当前时间
    function getTime() {
        var mydate = new Date();
        var myddy = mydate.getDay();
        var time = format(mydate);
        var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        $(".showDate").html(time + '&nbsp;&nbsp;' + weekday[myddy]); //将值赋给div
    }

    $(function () {
        setInterval("getTime();", 1000);

        var depId = $("#depId").val();
        if(depId == ''){
            $("#rootDep").css('background-color','#285efe');
        }else{
            $("#"+depId).css('background-color','#285efe');
        }
    });

    //部门员工数统计  + 男女统计  + 总人数统计
    function depPerson(){

        var depId = $("#depId").val();
        $.ajax({
            url: '/file/monitor/getHeadCount',
            type: "get",
            dataType: 'json',
            data:{
                userDept : depId
            },
            success: function (result) {
                if (result != null && result.code == 600) {

                    var obj = result.data;
                    //总人数
                    var userCount = obj.userCount;


                    $("#allCount").html(userCount);

                    var sexMap = obj.sexMap;
                    var manCount = 0;
                    var woManCount = 0;
                    for (var i = 0; i < sexMap.length; i++) {
                        var sex = sexMap[i];
                        var userSex = sex.userSex;
                        if (userSex == '男') {
                            manCount = sex.userCount;
                        } else if (userSex == '女') {
                            woManCount = sex.userCount;
                        }
                    }
                    countOfSex(manCount, woManCount);
                    var depName = obj.depName;
                    var depData = obj.depData;
                    if (depData.length != 0) {
                        var myChart = echarts.init(document.getElementById('totalPeople_center'));
                        var option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            legend: {
                                /* type: 'scroll',*/
                                orient: 'horizontal',
                                right: 68,
                                top: 310,
                                bottom: 20,
                              /*  orient: 'vertical',*/
                                /* top: "middle",
                                 right: "15%",*/
                                data: depName,
                                textStyle: {
                                    color: "#ffffff"
                                },
                                x: 'center'
                            },
                            series: [
                                {
                                    name: '人数',
                                    type: 'pie',
                                    radius: ['42%', '57%'],
                                    center: ['50%', '40%'],
                                    avoidLabelOverlap: false,
                                    itemStyle: {
                                        normal: {
                                            color: function (params) {
                                                var colorList = [
                                                    '#00a1e4', '#ffd900', '#24c768', '#ff7e00', '#F66BBF', '#A9A9A9', '#48D1CC', '#FF69B4'
                                                ];
                                                return colorList[params.dataIndex]
                                            },
                                            label: {
                                                show: true,
                                                position: 'top',
                                                formatter: '{c}个'
                                            }

                                        }

                                    },

                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'outside',
                                            formatter: '{d}%'
                                        },
                                        emphasis: {
                                            show: false,
                                            textStyle: {
                                                fontSize: '30',
                                                fontWeight: 'bold'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            show: true,
                                            length: 0.5
                                        },

                                    },
                                    data: depData
                                }
                            ]
                        };
                        myChart.setOption(option);


                    }
                }
            }
        });
    }

    //男人女人数目
    function countOfSex(manCount,woManCount){
        var myChart = echarts.init(document.getElementById('totalPeople_right'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
               /* type: 'scroll',*/
                orient: 'horizontal',
                right: 20,
                top: 310,
                bottom: 20,
                /*orient: 'vertical',*/
               /* top: "middle",
                right: "15%",*/
                data: ['男人数', '女人数'],
                textStyle: {
                    color: "#ffffff"
                },
                //图例之间间隔
                itemGap: 25,
                x:'center',
            },
            series: [
                {
                    name: '人数',
                    type: 'pie',
                    radius: ['42%', '57%'],
                    center: ['50%', '40%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    '#00a1e4', '#ffd900'
                                ];
                                return colorList[params.dataIndex]
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}个'
                            },
                            labelLine:{
                                length:20
                            }

                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: '{d}%',
                            position: 'outside'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data: [
                        {value: manCount, name: '男人数'},
                        {value: woManCount, name: '女人数'}
                    ]
                }
            ]
        };
        myChart.setOption(option);
    }


    //学历
    function education() {
        var depId = $("#depId").val();
        $.ajax({
            url: '/file/monitor/getXueLiStatis',
            type: "get",
            dataType: 'json',
            data:{
                userDept : depId
            },
            success: function (result) {
                if (result != null && result.code == 600) {

                    var obj = result.data;
                    var xueLiName = obj.xueLiName;
                    var xueLiCount = obj.xueLiCount;
                    var myChart = echarts.init(document.getElementById('education'),'customTheme');
                    option = {
                        title:{
                            text:'学历统计',
                            textStyle : {
                                fontSize  : '16'
                            }
                        },
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            height: 160,
                            bottom: '10%'
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: xueLiName,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                /*name: '直接访问',*/
                                type: 'bar',
                                barWidth: '50%',
                                data: xueLiCount,
                                itemStyle:{
                                    normal:{
                                        color:'#285efe',
                                        label: {
                                            show: true,		//开启显示
                                            position: 'top',	//在上方显示
                                            textStyle: {	    //数值样式
                                                color: '#ffffff',
                                                fontSize: 14
                                            }
                                        }
                                    }
                                },
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            }
        });

    }
    //年龄段统计
    function ageStatistic() {

        var depId = $("#depId").val();
        $.ajax({
            url: '/file/monitor/getAgeStatis',
            type: "get",
            dataType: 'json',
            data: {
                userDept: depId
            },
            success: function (result) {
                if (result != null && result.code == 600) {
                    var obj = result.data;
                    var ageName = obj.ageName;
                    var ageCount = obj.ageCount;

                    var myChart = echarts.init(document.getElementById('ageStatistic'),'customTheme');
                    option = {
                        title:{
                            text:'年龄段统计',
                            textStyle : {
                                fontSize  : '16'
                            }
                        },
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            height: 160,
                            bottom: '10%'
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ageName,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                /*name: '直接访问',*/
                                type: 'bar',
                                barWidth: '50%',
                                data: ageCount,
                                itemStyle:{
                                    normal:{
                                        color:'#285efe',
                                        label: {
                                            show: true,		//开启显示
                                            position: 'top',	//在上方显示
                                            textStyle: {	    //数值样式
                                                color: '#ffffff',
                                                fontSize: 14
                                            }
                                        }
                                    }
                                },
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            }
        });

    }

    //工龄统计
    function seniorityStatistic() {

        var depId = $("#depId").val();
        $.ajax({
            url: '/file/monitor/getWorkdayStatis',
            type: "get",
            dataType: 'json',
            data: {
                userDept: depId
            },
            success: function (result) {
                if (result != null && result.code == 600) {
                   var  obj = result.data;
                   var  ageName = obj.ageName;
                   var ageCount = obj.ageCount;
                    var myChart = echarts.init(document.getElementById('seniorityStatistic'),'customTheme');
                    option = {
                        title:{
                            text:'工龄统计',
                            textStyle : {
                                fontSize  : '16'
                            }
                        },
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            height: 160,
                            bottom: '10%'
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ageName,
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    interval: 0
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                /*name: '直接访问',*/
                                type: 'bar',
                                barWidth: '50%',
                                data: ageCount,
                                itemStyle:{
                                    normal:{
                                        color:'#285efe',
                                        label: {
                                            show: true,		//开启显示
                                            position: 'top',	//在上方显示
                                            textStyle: {	    //数值样式
                                                color: '#ffffff',
                                                fontSize: 14
                                            }
                                        }
                                    }
                                },
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            }
        });

    }

    //工种统计
    function jobStatistic() {
        var depId = $("#depId").val();
        $.ajax({
            url: '/file/monitor/getWorkTypeStatis',
            type: "get",
            dataType: 'json',
            data: {
                userDept: depId
            },
            success: function (result) {
                if (result != null && result.code == 600) {
                    var  obj = result.data;
                    var  workTypeName = obj.workTypeName;
                    var workTypeCount = obj.workTypeCount;
                    var myChart = echarts.init(document.getElementById('jobStatistic'),'customTheme');
                    option = {
                        title:{
                            text:'工种统计',
                            textStyle : {
                                fontSize  : '16'
                            },
                            top : '1%'
                        },
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            height: 160,
                            bottom: '10%'
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: workTypeName,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                /*name: '直接访问',*/
                                type: 'bar',
                                barWidth: '50%',
                                data: workTypeCount,
                                itemStyle:{
                                    normal:{
                                        color:'#285efe',
                                        label: {
                                            show: true,		//开启显示
                                            position: 'top',	//在上方显示
                                            textStyle: {	    //数值样式
                                                color: '#ffffff',
                                                fontSize: 14
                                            }
                                        }
                                    }
                                },
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            }
        });



    }

    function imgerror(obj) {
        $(obj).attr("src", "/images/lxn-man.png");
    }

    function imgerrorWoman(obj) {
        $(obj).attr("src", "/images/lxn-woman.png");
    }

    $(function () {

        //部门员工统计-饼状图 男人 女人数统计
        depPerson();
        //学历统计
        education();
        //年龄段统计
        ageStatistic();
        //工龄统计
        seniorityStatistic();
        //工种统计
        jobStatistic();
    });

    function format(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;
        return (year + '-' + month + '-' + day + " " + hour + ":" + min + ":" + sec);
    }
</script>
</html>
